<style>
#main{
  float: left;
  left: 0px;
   top: -30px;  
  /* background-color: blue */ 

}
#main2{
  margin-left: -600px;
  margin-top: -121px;
  float: left;
  left: 520px;
  top:96px;
  /* background-color: blue */

}

</style>
<template>
  <!-- 销售统计   -->
<div>
  <div id="main" style="width:700px;height:600px"></div>
  <div id="main2" style="width:600px;height:600px"></div>
  123123
</div>

</template>
<script>
import axios from "axios";




export default {
  data() {
    return {
     
     
    };
  },
  mounted() {
    this.show();
    this.show2();
  },
  created(){

  },

  methods: {
    show() {
        axios.post("http://localhost:8082/statistics/getTypelist").then(res=>{
      var myChart = this.$echarts.init(document.getElementById("main2"));
   
let index = 0;
var colorList = ['#73DDFF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF', '#58D5FF'];

function fun() {
    var timer = setInterval(function() {
        console.log(index)
        myChart.dispatchAction({
            type: 'hideTip',
            seriesIndex: 0,
            dataIndex: index
        });
        // 显示提示框
        myChart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: index
        });
        // 取消高亮指定的数据图形
        myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: index == 0 ? 5 : index - 1
        });
        myChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: index
        });
        index++;
        if (index > 5) {
            index = 0;
        }
    }, 3000)
}
fun()
var option = {

    title: {
        text: '销售类型占比',
        x: 'center',
        y: 'center',
        textStyle: {
            fontSize: 20
        }
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        type: 'pie',
        center: ['50%', '50%'],
        radius: ['30%', '60%'],
        clockwise: true,
        avoidLabelOverlap: true,
        hoverOffset: 30,
        emphasis:{
            itemStyle:{
                borderColor: '#f3f3f3',
                borderWidth: 20
            }
        },
        itemStyle: {
            normal: {
                color: function(params) {
                    return colorList[params.dataIndex]
                }
            }
        },
        label: {
            show: true,
            position: 'outside',
            formatter: '{a|{b}：{d}%}\n{hr|}',
            rich: {
                hr: {
                    backgroundColor: 't',
                    borderRadius: 3,
                    width: 3,
                    height: 3,
                    padding: [3, 3, 0, -12]
                },
                a: {
                    padding: [-30, 15, -20, 15]
                }
            }
        },
        labelLine: {
            normal: {
                length: 20,
                length2: 30,
                lineStyle: {
                    width: 1
                }
            }
        },
        data: res.data
    }]
};

      myChart.setOption(option);

          })


    },

    show2() {
        axios.post("http://localhost:8082/statistics/getTop5List").then(res=>{
      var myChart = this.$echarts.init(document.getElementById("main"));
   


let index = 0;
var colorList = ['#73DDFF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF', '#58D5FF'];

function fun() {
    var timer = setInterval(function() {
        console.log(index)
        myChart.dispatchAction({
            type: 'hideTip',
            seriesIndex: 0,
            dataIndex: index
        });
        // 显示提示框
        myChart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: index
        });
        // 取消高亮指定的数据图形
        myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: index == 0 ? 5 : index - 1
        });
        myChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: index
        });
        index++;
        if (index > 5) {
            index = 0;
        }
    }, 3000)
}
fun()
var option = {
    title: {
        text: '销量TOP5',
        x: 'center',
        y: 'center',
        textStyle: {
            fontSize: 20
        }
    },
    tooltip: {
        trigger: 'item'
    },
    series: [{
        type: 'pie',
        center: ['50%', '50%'],
        radius: ['30%', '60%'],
        clockwise: true,
        avoidLabelOverlap: true,
        hoverOffset: 30,
        emphasis:{
            itemStyle:{
                borderColor: '#f3f3f3',
                borderWidth: 20
            }
        },
        itemStyle: {
            normal: {
                color: function(params) {
                    return colorList[params.dataIndex]
                }
            }
        },
        label: {
            show: true,
            position: 'outside',
            formatter: '{a|{b}：{d}%}\n{hr|}',
            rich: {
                hr: {
                    backgroundColor: 't',
                    borderRadius: 3,
                    width: 3,
                    height: 3,
                    padding: [3, 3, 0, -12]
                },
                a: {
                    padding: [-30, 15, -20, 15]
                }
            }
        },
        labelLine: {
            normal: {
                length: 20,
                length2: 30,
                lineStyle: {
                    width: 1
                }
            }
        },
        data: res.data
    }]
};

      myChart.setOption(option);

          })


    }
  }
};
</script>
